<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复仇者联盟点歌系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    <style>
        body {
            background-color: rgb(41, 42, 43);
            background-size: cover;
            min-height: 100vh;
            box-sizing: border-box;
            margin: 0;
            padding-top: calc(10vh - 6em);
            font: 150%/1.6 Baskerville, Palatino, serif;
            color: #FFFFFF;

        }

        .description {
            position: relative;
            padding: 1em;
            max-width: 23em;
            background: hsla(0, 0%, 100%, .25) border-box;
            overflow: hidden;
            border-radius: .3em;
            box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
            0 .5em 1em rgba(0, 0, 0, 0.6);
            text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
        }

        .description::before {
            content: '';
            position: absolute;
            top: 0;
            rightright: 0;
            bottombottom: 0;
            left: 0;
            z-index: -1;
            -webkit-filter: blur(20px);
            filter: blur(20px);
        }

        #app {
            background-color: rgba(0, 0, 0, .35);
        }

        .nav {
            margin: 20px;
            background-color: rgba(1, 1, 1, .75);
        }

        .table > thead > tr > td,
        .table > tbody > tr > td,
        .table > tfoot > tr > td:focus {

            color: pink;
        }

        .table > thead > tr > td,
        .table > tbody > tr > td,
        .table > tfoot > tr > td:hover {
            background-color: rgba(1, 1, 1, .25);

        }

        li { list-style: none; }
        #fill_in { margin-bottom: 10px; }
        #fill_in li { padding: 5px 0; color: black}
        #fill_in .text {  height: 30px; padding: 0 10px; border: 1px solid #ccc; line-height: 30px; font-size: 14px;  font-family: arial; }
        #fill_in textarea {  height: 100px; line-height: 20px; padding: 5px 10px; border: 1px solid #ccc; font-size: 14px; font-family: arial; overflow: auto; vertical-align: top; }
        #fill_in .btn { border: none; width: 100px; height: 30px; border: 1px solid #ccc; background: #fff; color: #666; font-size: 14px; position: relative; left: 42px; }
        #message_text { display: none; }
        #message_text h2 { font-size: 14px; padding: 6px 0 4px 10px; background: #ddd; border-bottom: 1px solid #ccc; color: palevioletred}
        #message_text li { background: #f9f9f9; border-bottom: 1px solid #ccc; color: #666; overflow: hidden; }
        #message_text h3 { padding: 5px; font-size: 14px; line-height: 24px; }
        #message_text p { padding: 0 10px 10px; text-indent: 28px; line-height: 20px; }
    </style>

    <script type="text/javascript">
        var oBtn = null;
        var oForm = null;
        var oText = null;
        var oTextarea = null;
        var timer = null;
        var speed = 0;
        var oLi = null
        var oH3 = null;
        var oP = null;
        window.onload = function()
        {
            oBtn = document.getElementById("btn");
            oBtn.onclick = getValue;
        };
        function getValue()
        {
            document.getElementById("message_text").style.display = "block";
            oForm = document.getElementsByTagName("form")[0];
            oText = document.getElementById("text");
            oTextarea = document.getElementsByTagName("textarea")[0];
            oUl = document.getElementById("message_text").getElementsByTagName("ul")[0];
            oForm.onsubmit = function(){ return false; };
            if( oText.value == "" || oTextarea.value == "" )
            {
                alert("就二个框，你还不写全了啊？");
                return;
            }
            oLi = document.createElement("li");
            oH3 = document.createElement("h3");
            oP = document.createElement("p");
            oH3.innerHTML = oText.value;
            oP.innerHTML = oTextarea.value;
            if(oUl.childNodes[0])
            {
                oUl.insertBefore(oLi,oUl.childNodes[0]);
            }
            else
            {
                oUl.appendChild(oLi);
            }
            oLi.appendChild(oH3);
            oLi.appendChild(oP);
            oText.value = "";
            oTextarea.value = "";
            var h = oLi.offsetHeight;
            oLi.style.height = '0px';
            if(timer)
            {
                clearInterval(timer);
            }
            timer = setInterval("goTime("+h+")", 35);
            goTime(h);
        }
        function goTime(target)
        {
            var top = oLi.offsetHeight;
            speed += 3;
            top += speed;
            if(top > target)
            {
                top = target;
                speed *= -0.7;
            }
            if(top===target && Math.abs(speed) < 3)
            {
                clearInterval(timer);
                timer = null;
                oLi.style.height = target + "px";
            }
            oLi.style.height = top + "px";
        }
    </script>
</head>
<body>
<nav class="nav">
    <div class="row">
        <div class="col-md-3">
            <img src="img/logo1.png" alt="">
        </div>
        <div class="col-md-9" style="margin-top: 70px">
            <marquee class="marquee">欢迎来到神盾局音乐吧，为你开启喜欢的音乐，让它伴随你进入一天嗨皮时光~~</marquee>
        </div>
    </div>
</nav>

<div id="app" class="container-fluid">
    <div class="row">
        <div class="col-sm-3" style="padding-top: 25px">
            <p>请使用极速模式,搜索歌曲,双击添加到播放序列.</p>
            <div class="input-group">
                <input v-model="w" type="text" class="form-control" placeholder="如：一次就好" >
                <span class="input-group-btn"><button @click="search" class="btn btn-default" type="button">搜索</button>
                </span>

            </div>

            <table class="table table-hover">
                <tr v-for="(song,i) in results" @dblclick="select(i)">
                    <td>{{song.name}}</td>
                    <td>{{song.singer}}</td>
                </tr>
            </table>

        </div>

        <div class="col-sm-6">
            <div class="row">
                <h2>播放序列</h2>
                <table class="table table-hover ">
                    <tr v-for="(song,i) in songs">
                        <td>{{i}}</td>
                        <td>{{song.name}}</td>
                        <td>{{song.singer}}</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="row">
                <h2>留言板</h2>

                <div  class="description">
                    <ul id="fill_in">
                        <form>
                            <li>昵称：<input id="text" type="text" class="text" /></li>
                            <li>内容：<textarea id="content" style="width:200px; height:100px"></textarea></li>
                            <li><input id="btn" type="submit" value="提交" class="btn" /></li>
                        </form>
                    </ul>
                    <div id="message_text">
                        <h2>留言内容</h2>
                        <ul></ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<script src="//cdn.bootcss.com/vue/2.1.3/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            w: '',
            results: [],
            songs: [],
        },
        created: function () {
            this.updateSongs()
            setInterval(this.updateSongs, 3000)
        },
        methods: {
            search: function () {
                var that = this
                $.getJSON("/search", {name: that.w}, function (data) {
                    that.results = data.content
                });
            },
            select: function (i) {
                var that = this
                var song = this.results[i]
                $.post("/add", song, function (data) {
                    that.updateSongs()
                    alert("点播成功,等着吧")
                })
            },
            updateSongs: function () {
                var that = this
                $.getJSON("/songs", function (data) {
                    that.songs = data
                })
            }
        }
    })

</script>
</body>
</html>